<!DOCTYPE html>
<html>

<head>
    <title>{$coursinfo.title|default='eduYouke在线教育点播系统'}</title>
    <meta name="keywords" content="{$site_info.seoKeywords|default='eduYouke在线教育点播系统'}" />
    <meta name="description" content="{$coursinfo.description|default='eduYouke在线教育点播系统'}">
    {include file='../public/header' /}
    <link href="__TEMPSTATIC__/css/course.css" rel="stylesheet">
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
</head>

<body class="hold-transition layout-top-nav">
    <div class="wrapper">
        {include file='../public/nav' /}
        <div class="container mt-2 aliplayer">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    {volist name="breadcrumb" id="vo" key="k"}
                    <li class="breadcrumb-item"><a href="{:url('index/list',['list_id'=>$vo['id']])}">{$vo.title}</a></li>
                    {/volist}
                    <li class="breadcrumb-item " aria-current="page"><a href="{:url('/course/index',['id'=>$coursinfo['id']])}">{$coursinfo.title}</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><a href="{:url('/detail/index',['id'=>$videoinfo['id'],'course_id'=>$coursinfo['id'] ])}">{$videoinfo.title}</a></li>
                </ol>
            </nav>
            <div class="prism-player" id="player-con"></div>
            <div class="chapter bg-dark">
                <p class="chapter-info text-white">
                    <span class="ml-4">
                        <i class="fa fa-graduation-cap blink"></i>
                    </span>
                    <span class="ml-4">
                        <span style="font-weight: 600;">正在学习 :</span>
                        <a href="#" class="text-white">
                            {$coursinfo.title}
                        </a>
                    </span>
                    <span class="float-right mr-4 ">
                        {if $videoinfo['next_id']}
                        <span> <a href="{:url('/detail/index',['id'=>$videoinfo['next_id'],'course_id'=>$coursinfo['id'] ])}" class="text-secondary chapter-link">下一章节</a> &nbsp;&nbsp;</span>
                        <a href="{:url('/detail/index',['id'=>$videoinfo['next_id'],'course_id'=>$coursinfo['id'] ])}" class="text-white chapter-link">
                            {$videoinfo.next_title}
                        </a>
                        {else/}
                        <span>没有更多了...</span>
                        {/if}
                    </span>
                </p>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="container">
            <div class="mt-3">
            </div>
            <div class="row">
                <div class="col-lg-9 col-md-12">
                    <!-- 详情start -->
                    <div class="card mt-3">
                        <ul class="nav nav-pills  mt-3 mb-3  bg-white" id="pills-tab" role="tablist">
                            <li class="nav-item detail-nav-item">
                                <a class="nav-link active ml-2" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">章节目录</a>
                            </li>
                            <!--  <li class="nav-item detail-nav-item">
                                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">资料下载</a>
                            </li> -->
                        </ul>
                    </div>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                            {volist name="chapterlist" id="vo" key="keys" }
                            <div class="card mt-3">
                                <div class="p-4">
                                    <h5 class="card-title text-body mb-4 font-weight-bold">{$vo.title}</h5>
                                    <p class="card-text text-black-50">{$vo.description}</p>
                                </div>
                                <div class="card-body">
                                    <ul class="list-group list-group-flush">
                                        {volist name="vo['video']" id="v" key="k"}
                                        <a href="{:url('/detail/index',['id'=>$v['id'],'course_id'=>$vo['course_id'] ])}" class="text-muted">
                                            <li class="list-group-item float-left">
                                                <span class="fa fa-play-circle"></span>
                                                <span>
                                                    {$keys}-{$k} {$v.title} (08:33)
                                                </span>
                                                {if (input('param.id') == $v.id ) }
                                                <a href="{:url('/detail/index',['id'=>$v['id'],'course_id'=>$vo['course_id'] ])}" class="btn btn-xs btn-info float-right">进行中</a>
                                                {else/}
                                                {if $v.study_status}
                                                <a href="{:url('/detail/index',['id'=>$v['id'],'course_id'=>$vo['course_id'] ])}" class="btn btn-xs btn-secondary float-right">已学习</a>
                                                {else/}
                                                <a href="{:url('/detail/index',['id'=>$v['id'],'course_id'=>$vo['course_id'] ])}" class="btn btn-xs btn-danger float-right">未开始</a>
                                                {/if}
                                                {/if}
                                            </li>
                                        </a>
                                        {/volist}
                                    </ul>
                                </div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                    <!-- 详情end -->
                </div>
                <input type="hidden" name="videoplay" value="0">
                <div class="col-lg-3 col-md-12 ">
                    <div class="card mt-3 mb-3">
                        <div class="card-header">
                            <h3 class="card-title">推荐课程</h3>
                        </div>
                        <div class="card-body p-0">
                            <ul class="products-list product-list-in-card pl-2 pr-2">
                                {volist name="recommend" id="vo"}
                                <div class="attachment-block mt-2 clearfix">
                                    <img class="attachment-img" src="{:getUrlPath($vo.cource_image_url)}" alt="{$vo.title}">
                                    <div class="attachment-pushed product-info">
                                        <a href="{:url('/course/index',['id'=>$vo['course_id']])}" class="product-description mt-1">
                                            <strong>
                                                {$vo.course_title}
                                            </strong>
                                        </a>
                                        <div class="attachment-text">
                                            <small class="product-description mt-1">{$vo.description}</small>
                                        </div>
                                    </div>
                                </div>
                                {/volist}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- http://edu.com/storage/tovideo/20200411\e3f21dec356563033d26fdd17e75b01c.mp4 -->
        {include file='../public/footer' /}
        {include file='../public/script' /}
</body>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<script>
var player = new Aliplayer({
    "id": "player-con",
    "width": "100%",
    "source": "{$videoinfo.channel == 'local' ? html_entity_decode($videoinfo.video_url) :''}",
    "cover": "{:getUrlPath($videoinfo.image_url)}",
    "height": "500px",
    "format": "{$videoinfo.suffix}",
    "playauth": "{$videoinfo.aliVideo.PlayAuth ? $videoinfo.aliVideo.PlayAuth :''}",
    "encryptType": 1,
    "autoplay": false,
    "isLive": false,
    "rePlay": false,
    "vid": "{$videoinfo.aliVideo.VideoMeta.VideoId ? $videoinfo.aliVideo.VideoMeta.VideoId : ''}",
    "playsinline": true,
    "preload": true,
    "controlBarVisibility": "hover",
    "useH5Prism": true
}, function(player) {

});

player.on('ready', function(e) {
    player.play();
});

</script>